<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>ArcGIS REST服务加载示例 - ArcGIS API 3.15</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
        var map, dynamicLayer, imageLayer, featureLayer;

        require([
            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/ArcGISImageServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Extent",
            "esri/SpatialReference",
            "esri/config",
            "dojo/dom",
            "dojo/dom-style",
            "dojo/on",
            "dojo/domReady!"
        ], function (
            Map,
            ArcGISDynamicMapServiceLayer,
            ArcGISTiledMapServiceLayer,
            ArcGISImageServiceLayer,
            FeatureLayer,
            Extent,
            SpatialReference,
            esriConfig,
            dom,
            domStyle,
            on
        ) {
            // 设置代理 URL
            esriConfig.defaults.io.proxyUrl = "/proxy/";

            // 如果有启用 CORS 的服务器，添加到 corsEnabledServers
            // 配置CORS
            esriConfig.defaults.io.corsEnabledServers.push(
                "services.arcgisonline.com",
                "sampleserver6.arcgisonline.com"
            );

            // 创建地图实例
            try {
                map = new Map("mapDiv", {
                    center: [-100, 40],
                    zoom: 4,
                    logo: false
                });

                // 监听地图加载错误
                map.on("error", function (error) {
                    showError("地图加载错误: " + error.message);
                });

                // 加载动态地图服务（Dynamic Map Service）
                dynamicLayer = new ArcGISDynamicMapServiceLayer(
                    "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                    {
                        opacity: 0.7,
                        id: "dynamicLayer"
                    }
                );



                // 加载要素服务（Feature Service）
                featureLayer = new FeatureLayer(
                    "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",
                    {
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        outFields: ["*"],
                        id: "featureLayer",
                        visible: false
                    }
                );

                // 加载World Imagery瓦片地图服务
                var worldImagery = new ArcGISTiledMapServiceLayer(
                    "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
                    {
                        id: "worldImagery"
                    }
                );


                // 添加图层到地图
                map.addLayer(worldImagery);

                // map.addLayer(dynamicLayer);

                // map.addLayer(featureLayer);




            } catch (e) {
                showError("初始化错误: " + e.message);
            }

            // 图层加载错误处理
            function handleError(error) {
                showError("图层加载错误: " + error.message);
            }

            function showError(message) {
                var errorDiv = dom.byId("errorMsg");
                errorDiv.innerHTML = message;
                domStyle.set(errorDiv, "display", "block");
                console.error(message);
            }

        });
    </script>
</head>

<body>
    <div id="mapDiv"></div>

</body>

</html>